<template>
  <div>
    <ul>
      <li v-for="(item,index) in arr" :key="index">{{item}}</li>
    </ul>
    <button @click="revBtn">翻转</button>
    <button @click="splBtn">截取前三个</button>
    <button @click="upBtn">点击改掉第一个元素的值</button>
  </div>
</template>

<script>
export default {
  name: 'CodeApp',

  data() {
    return {
      arr:[1,2,3,4,5,6,7,8,9]
    };
  },

  mounted() {
    
  },

  methods: {
    revBtn(){
      // 会修改原数组
      this.arr.reverse()
    },
    splBtn(){
      // 不修改原数组
      // 返回值是新数组
      this.arr=this.arr.slice(0,3)
    },
    upBtn(){
      // 将第一个元素修改为10
      // 注意：直接通过索引进行赋值，不会进行页面更新
      // this.arr[0]=10
      // vue提供了一个方法来帮助我们实现这个功能
      // this.$set()
      // 参数1：要修改对象，数组
      // 参数2：要修改的键，索引
      // 参数3：要修改的值
      this.$set(this.arr,0,10)
    }
  },
};
</script>

<style lang="scss" scoped>

</style>